﻿
games.game5 = {
    //breakout
    init: function () {
        $("#gamezone").html("<p style='font-size:18pt;padding:30px;'><strong style='font-size:20pt;'>Snowball Breakout</strong><br/>Use <span style='color:#939'>left</span> and <span style='color:#393'>right</span> to control the paddle</p><canvas id='game5-breakout' width='400' height='400' style='border:1px solid #000;margin:150px 50px;float:right;'></canvas>");
        this.breakout($("#game5-breakout"), 400, 400);
    },
    breakout: function (element, h, w) {
        engine = {
            h: 0, w: 0,
            gameBoard: undefined,
            keysDown: new Array(),
            engineloop: undefined,
            keyloop: undefined,
            init: function (gameBoard, h, w) {
                this.gameBoard = gameBoard;
                this.h = h;
                this.w = w;
                var that = this;
                this.world.init(that, this.h, this.w, function () {
                    clearInterval(that.engineloop);
                    clearInterval(that.keyloop);
                });
                document.onkeydown = function (e) {
                    var KeyID = (window.event) ? event.keyCode : e.keyCode;
                    return that.handleKeyDown(KeyID);
                }
                document.onkeyup = function (e) {
                    var KeyID = (window.event) ? event.keyCode : e.keyCode;
                    return that.handleKeyUp(KeyID);
                }
                alert("are you ready... left and right");
                this.engineloop = setInterval(function () {
                    that.tick();
                }, 1);
                this.keyloop = setInterval(function () {
                    that.handleKeys();
                }, 1);
            },
            handleKeys: function () {
                if (this.keysDown[39]) {
                    //right
                    this.world.internalPlayer.moveRight();
                }
                if (this.keysDown[37]) {
                    //left
                    this.world.internalPlayer.moveLeft();
                }
                if (!(this.keysDown[39] & this.keysDown[37])) {

                }
            },
            handleKeyUp: function (keyId) {
                this.keysDown[keyId] = false;
                return !(keyId == 37 | keyId == 39);
            },
            handleKeyDown: function (keyId) {
                this.keysDown[keyId] = true;
                return !(keyId == 37 | keyId == 39);
            },
            player: {
                x: 0,
                y: 390,
                h: 10,
                w: 100,
                color: '#000',
                max: 0, min: 0,
                speed: 2,
                moveRight: function () {
                    this.x = this.x + this.w > this.max ? this.x : this.x + this.speed;
                },
                moveLeft: function () {
                    this.x = this.x < this.min ? this.x : this.x - this.speed;
                },
                render: function (ctx) {
                    ctx.fillStyle = this.color; // blue
                    ctx.strokeStyle = '#000'; // red
                    ctx.fillRect(this.x, this.y, this.w, this.h);
                    ctx.fillRect(this.x, this.y, this.w, this.h);
                }
            },
            target: function (x, y, h, w, row) {
                this.x = x;
                this.y = y;
                this.h = h;
                this.w = w;
                this.destroy = false;
                this.getRowColour = function (row) {
                    switch (row) {
                        case 0: return '#f00';
                        case 1: return '#ff0';
                        case 2: return '#0f0';
                        case 3: return '#0ff';
                        case 4: return '#00f';
                        case 5: return '#fff';
                        case 6: return '#000';
                        case 7: return '#f00';
                        case 8: return '#ff0';
                        case 9: return '#0f0';
                        case 10: return '#0ff';
                        case 11: return '#00f';
                        case 12: return '#fff';
                        case 13: return '#000';
                        default: return '#ccc';
                    }
                }
                this.color = this.getRowColour(row);
                this.render = function (ctx) {
                    if (this.destroy) { return; }
                    ctx.fillStyle = this.color; // blue
                    ctx.strokeStyle = '#000'; // red
                    ctx.fillRect(this.x, this.y, this.w, this.h);
                    ctx.strokeRect(this.x, this.y, this.w, this.h);
                }
            },
            ball: {
                x: 0,
                y: 0,
                h: 10,
                w: 10,
                angle: 0,
                color: '#fff',
                max: 0, min: 0,
                xinc: false,
                yinc: false,
                speed: 2,
                adjust: function () {
                    var xDiff = Math.sin(this.angle * Math.PI / 180) * this.speed;
                    var yDiff = Math.cos(this.angle * Math.PI / 180) * this.speed;

                    this.x = this.xinc ? this.x + xDiff : this.x - xDiff;
                    this.y = this.yinc ? this.y + yDiff : this.y - yDiff;
                },
                render: function (ctx) {
                    ctx.strokeStyle = '#000'; // red
                    ctx.fillStyle = this.color; // blue
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.w, 0, Math.PI * 2, true);
                    ctx.stroke();
                    ctx.fill();
                    ctx.closePath();
                }
            },
            world: {
                internalPlayer: undefined,
                internalBall: undefined,
                internalBlocks: [],
                h: 0, w: 0,
                killCallback: undefined,
                init: function (that, h, w, killCallback) {
                    for (var i = 0; i < 6; i++) { //y
                        for (var k = 0; k < 6; k++) { //x
                            var spaceBetweenBlocks = 10;
                            var target = new that.target(k * 10 + k * spaceBetweenBlocks + k * 50, i * 10, 5, 50, i);
                            this.internalBlocks[this.internalBlocks.length] = target;
                        }
                    }
                    this.internalPlayer = that.player;
                    this.internalBall = that.ball;
                    this.internalPlayer.max = h;
                    this.internalPlayer.min = 0;
                    this.internalBall.max = h;
                    this.internalBall.min = 0;
                    this.h = h;
                    this.w = w;
                    this.internalBall.y = games.helper.getRandomNumber(h / 4, (h / 4) * 3);
                    this.internalBall.x = games.helper.getRandomNumber(h / 4, (h / 4) * 3);
                    this.killCallback = killCallback;
                },
                render: function (ctx) {
                    this.internalPlayer.render(ctx);
                    this.internalBall.render(ctx);
                    var destroyed = 0;
                    for (var i = 0; i < this.internalBlocks.length; i++) {
                        destroyed += !this.internalBlocks[i].destroy ? 1 : 0;
                        this.internalBlocks[i].render(ctx);
                    }
                    if (destroyed == 0) {
                        if (this.killCallback != undefined) {
                            this.killCallback();
                        }
                        alert("Wll done! you won!");
                    }
                },
                adjust: function () {
                    this.internalBall.adjust();

                    /*## collision detection algo starts here :( ##*/
                    //is ball inside the world?
                    if (this.internalBall.x - this.internalBall.w < 0) {
                        this.internalBall.xinc = true;
                    }
                    if (this.internalBall.y - this.internalBall.h < 0) {
                        this.internalBall.yinc = true;
                    }
                    if (this.internalBall.x + this.internalBall.w > this.w) {
                        this.internalBall.xinc = false;
                    }
                    if (this.internalBall.y + this.internalBall.h > this.h) {
                        if (this.killCallback != undefined) {
                            this.killCallback();
                        }
                        alert("Uh oh, you died... but well done!");
                    }

                    //has ball hit paddle
                    if (this.internalBall.y + this.internalBall.h > this.internalPlayer.y) {
                        if (this.internalBall.x > this.internalPlayer.x) {
                            if (this.internalBall.x < this.internalPlayer.x + this.internalPlayer.w) {
                                this.internalBall.yinc = false;
                                var newAngle = (this.internalBall.x - this.internalPlayer.x) * 1.4 - 70;
                                this.internalBall.xinc = newAngle > 0;
                                this.internalBall.angle = newAngle < 0 ? newAngle * -1 : newAngle;
                            }
                        }
                    }
                    for (var i = 0; i < this.internalBlocks.length; i++) {
                        var currentBlock = this.internalBlocks[i];
                        if (!currentBlock.destroy) {
                            if (currentBlock.y < this.internalBall.y + this.internalBall.h) {
                                if (currentBlock.y + currentBlock.h > this.internalBall.y - this.internalBall.h) {
                                    if (currentBlock.x < this.internalBall.x + this.internalBall.w) {
                                        if (currentBlock.x > this.internalBall.x - this.internalBall.w) {
                                            this.internalBall.xinc = false;
                                            currentBlock.destroy = true;
                                        }
                                    }
                                    if (currentBlock.x + currentBlock.w < this.internalBall.x + this.internalBall.w) {
                                        if (currentBlock.x + currentBlock.w > this.internalBall.x - this.internalBall.w) {
                                            this.internalBall.xinc = true;
                                            currentBlock.destroy = true;
                                        }
                                    }
                                }
                            }
                            if (currentBlock.x < this.internalBall.x + this.internalBall.w) {
                                if (currentBlock.x + currentBlock.w > this.internalBall.x - this.internalBall.w) {
                                    if (currentBlock.y < this.internalBall.y + this.internalBall.h) {
                                        if (currentBlock.y > this.internalBall.y - this.internalBall.h) {
                                            this.internalBall.yinc = false;
                                            currentBlock.destroy = true;
                                        }
                                    }
                                    if (currentBlock.y + currentBlock.h < this.internalBall.y + this.internalBall.h) {
                                        if (currentBlock.y + currentBlock.h > this.internalBall.y - this.internalBall.h) {
                                            this.internalBall.yinc = true;
                                            currentBlock.destroy = true;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            },
            tick: function () {
                this.gameBoard.clearRect(0, 0, 400, 400);
                this.world.render(this.gameBoard);
                this.world.adjust();
            }
        }

        gameBoard = element[0].getContext('2d');
        engine.init(gameBoard, h, w);
    }
};